<template>
    <div class="PopSportData">
        <van-popup v-model:show="show" position="bottom">
            <van-picker v-model="sportType" title="运动类型" :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
        </van-popup>
        <van-popup v-model:show="showPickTime" position="bottom">
            <van-picker-group title="选择运动时间范围" :tabs="['开始时间', '结束时间']" @confirm="confirmTime" @cancel="cancelTime">
                <van-time-picker v-model="startTime" />
                <van-time-picker v-model="endTime" />
            </van-picker-group>
        </van-popup>
    </div>
</template>

<script setup>
import { sporticons } from '@/utils/icons.js'
import { ref } from 'vue';
import { showSuccessToast, showFailToast, showToast } from 'vant';
import { timeDifference } from '@/utils/timeDifference.js'


const show = ref(false);
const sportType = ref([])
const columns = [];
for (let key in sporticons) {
    columns.push({ text: key, value: key })
}
const showPickTime = ref(false)
const startTime = ref([]);
const endTime = ref([]);
const minute = ref('')
const emits = defineEmits(['writeData'])


const onConfirm = () => {
    // console.log(sportType.value);
    show.value = false
    showPickTime.value = true
};

const onCancel = () => {
    show.value = false
}

const confirmTime = () => {
    // console.log(startTime.value.join(':'), endTime.value.join(':'), sportType.value);
    minute.value = timeDifference(startTime.value.join(':'), endTime.value.join(':'))
    if (Number(minute.value) <= 0) {
        showFailToast('请选择正确的时间范围');
        return;
    } else {
        emits('writeData', { timeRange: `${startTime.value.join(':')} - ${endTime.value.join(':')}`, minute: minute.value, sportType: sportType.value[0] })
    }
    showPickTime.value = false
    show.value = false
};

const cancelTime = () => {
    showPickTime.value = false
    show.value = true
};

defineExpose({
    show
})
</script>

<style lang="less" scoped></style>